<template>
	<view>
		<view class="header-space"></view>
		<view class="container padding-sm">
			<view class="flex">
				<view class="banner c-radius margin-bottom-xs">
					<image :src="topUrl" class="c-radius"></image>
				</view>
			</view>
			<view class="flex margin-top-xs">
				<view class="flex-sub cu-capsule round">
					<view class='cu-tag bg-blue '>
						<text class='cuIcon-sponsorfill'></text>
					</view>
					<view class="cu-tag line-blue">
						{{ category.label }}
					</view>
				</view>
			</view>
			<view class="flex margin-top bg-white c-radius">
				<vc-serv-card :serv-list="servList"></vc-serv-card>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		getHousekeepingServList,
		getHousekeepingTypeList
	} from "../../api/homemaking/homemakingApi"
	import mapping from "../../lib/java110/java110Mapping"
	import {
		isNull
	} from '../../lib/java110/utils/StringUtil.js'

	import vcServCard from '@/components/vc-serv-card/vc-serv-card.vue'
	import param from '../../constant/param.js';
	import conf from '@/conf/config.js';
	export default {
		components: {
			vcServCard
		},

		data() {
			return {
				shopId: '',
				banner: '',
				shop: {},
				user_info: {},
				category: {},
				servList: [],
				// 选中的分类id
				hktId: '',
				topUrl: conf.commonBaseUrl + 'h5/static/images/homemaking/shop_banner.jpg'
			}
		},
		async onLoad(options) {
			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			this.shopId = options.shopId
			this.hktId = options.hktId
			this.initCategory()
			this._getHousekeepingServList()

		},
		methods: {
			initCategory() {
				let _that = this
				let categoryData = uni.getStorageSync(mapping.HOMEMAKING_CATEGORY_LIST)
				if (isNull(categoryData)) {
					let params = {
						page: 1,
						row: 100,
						shopId: param.SHOP_ID_GLOBAL,
						typeCd: param.MENU_TYPE.HOMEMAKING
					}
					getHousekeepingTypeList(params)
						.then(function(result) {
							let categoryData = result.data
							uni.setStorageSync(mapping.HOMEMAKING_CATEGORY_LIST, categoryData);
							_that.category = categoryData.filter((item) => {
								return item.hktId == this.hktId
							})[0];
							if (!_that.category) {
								_that.category = categoryData[0];
							}
						})
				}
			},
			_getHousekeepingServList() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					hktId: this.hktId,
					// 大类查询，不用传
					shopId: this.shopId
				}
				getHousekeepingServList(params)
					.then(function(result) {
						let servList = result.data
						_that.servList = servList
					})
			},
		}
	}
</script>
<style lang="scss">
	.container {
		.item-menu-name {
			font-weight: normal;
			font-size: 24rpx;
			color: $u-main-color;
		}

		.banner {
			width: 100%;
			height: 280upx;
			display: block;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);

			.item-container {
				display: flex;
				flex-wrap: wrap;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>